<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--引入cesium基础lib-->
		<link href="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Widgets/widgets.css"
			rel="stylesheet" type="text/css" />
		<script src="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Cesium.js"
			type="text/javascript"></script>

		<!--引入mars3d库lib-->
		<link href="https://registry.npmmirror.com/mars3d/latest/files/mars3d.css" rel="stylesheet" type="text/css" />
		<script src="https://registry.npmmirror.com/mars3d/latest/files/mars3d.js" type="text/javascript"></script>
		<style>
			html,
			body,
			.mars3d-container {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				border: none;
				overflow: hidden;
			}
			.labelStyle{
				background-color: pink;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<!-- 为 Mars3D 准备一个定义了宽高的 DOM -->
		<div id="mars3dContainer" class="mars3d-container"></div>
		<script type="text/javascript">
		

			// 初始化地图
			const mapOptions = {
				basemaps: [{
					name: "天地图",
					type: "tdt",
					layer: "img_d",
					show: true
				}],
				scene: {
					center: {
						lat: 36.8605, // 3d模型加载要与scene场景的中心经纬度一直才能再视角内看到
						lng: 121.707989,
						alt: 680.4, // 高度
						// heading: 5.843543111393644,
						pitch: -60,
						// roll: '6.283179332387251',
						duration: 1.5,
					} // 示例位置：上海
				}
			};

			const map = new mars3d.Map("mars3dContainer", mapOptions);

			// 加载3D Tileset倾斜摄影模型
			const tilesetLayer = new mars3d.layer.TilesetLayer({
				url: 'http://localhost:8080/Apps/assets/media/rushanruibo/tileset.json', // 替换为你的Tileset URL
				// maximumScreenSpaceError: 16, // 设置渲染质量，越小质量越好，但性能要求更高
				// cullWithChildrenBounds: true, // 提高性能，可以根据需要调整
				// dynamicScreenSpaceError: true // 启用动态屏幕空间误差
				// 优化
				// scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
				// skipLevelOfDetail: true,
				// skipScreenSpaceErrorFactor: 64, // 默认 16
				// skipLevels: 1, // 如果为0，则不会跳过任何级别。与skipScreenSpaceErrorFactor一起使用，以确定要加载的磁贴
				// immediatelyLoadDesiredLevelOfDetail: false, // 当 skipLevelOfDetail 为true时，将只下载满足最大屏幕空间错误的磁贴。忽略跳过因素，只加载所需的磁贴。
				// baseScreenSpaceError: 1920,
				maximumScreenSpaceError: 1, // 数值加大，能让最终成像变模糊
				// cullWithChildrenBounds: true,
				// cullRequestsWhileMoving: true,
				// cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
				// preloadWhenHidden: true,
				// preferLeaves: true,
				// maximumMemoryUsage: 512, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
				// progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
				// dynamicScreenSpaceError: true, // 根据测试，有了这个后，会在真正的全屏加载完之后才清晰化房屋(优化选项。减少离相机更远的磁贴的屏幕空间错误)
				// dynamicScreenSpaceErrorDensity: 0.1, // 数值加大，能让周边加载变快
				// dynamicScreenSpaceErrorFactor: 4.0, // 不知道起了什么作用没，反正放着吧先
				// dynamicScreenSpaceErrorHeightFalloff: 0.25,

				//控制切片视角显示的数量，可调整性能
				// maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
			});

			map.addLayer(tilesetLayer);

			let graphicLayer = new mars3d.layer.GraphicLayer({
				url: './static/json/enties-car.json'
				// hasEdit: true,
				// isAutoEditing: true // 绘制完成后是否自动激活编辑
			})
			map.addLayer(graphicLayer)


			addDemoGraphic2(graphicLayer)
			addDemoGraphicLabel(graphicLayer)
			
			/**
			 * @param {Object} graphicLayer
			 * 
			 */
			 // 获取原生的 Cesium 对象
			var scene = map.scene;
			console.log('scene',scene)
			var matGLSL =
			  "#define L length(c - .1*vec2(    // use: L x,y)) \n" +
			  "#define M(v)   max(0., v) \n" +
			  "czm_material czm_getMaterial(czm_materialInput materialInput) \n" +
			  "{ \n" +
			  "czm_material m = czm_getDefaultMaterial(materialInput);\n" +
			  "vec2 uv = materialInput.st; \n" +
			  "vec2 c = uv+uv - 1.0, \n" +
			  "k = .1-.1*step(.007,abs(c)); \n" +
			  "float x = L 0))*25., // x,y - polar coords \n" +
			  "iTime = czm_frameNumber * 0.01, \n" +
			  "y = mod(atan(c.y, c.x)+iTime, 6.28), \n" +
			  "d = M(.75 - y * .4), \n" +
			  "b = min( min(L -3,-1)), L 6,-4)) ), L 4,5)) ) + .06 - y * .04; \n" +
			  "float result = (x < 24. ? .25 + M(cos(x + .8) - .95) * 8.4 + k.x + k.y + d * d+ M(.8 - y * (x + x + .3)): 0.) \n" +
			  "+ M(1. - abs(x + x - 48.)); \n" +
			  "m.diffuse = vec3(0.0, result, 0.1); \n" +
			  "m.alpha = result; \n" +
			  "return m; \n" +
			  "} \n";
	
			var myMat = new Cesium.Material({
			  fabric: {
				type: "RadarMaterial",
				source: matGLSL,
			  },
			});
	
			var primitive = new Cesium.Primitive({
			  geometryInstances: new Cesium.GeometryInstance({
				geometry: new Cesium.RectangleGeometry({
				  rectangle: Cesium.Rectangle.fromDegrees(100.0, 31.0, 110.0, 39.0),
				  vertexFormat: Cesium.VertexFormat.ALL,
				}),
			  }),
			  appearance: new Cesium.EllipsoidSurfaceAppearance({
				material: myMat,
			  }),
			});
	
			// Add instances to primitives
			scene.primitives.add(primitive);
	
			map.camera.setView({
			  destination: Cesium.Cartesian3.fromDegrees(121.707989, 36.8605, 4500000.0),
			});
	
			function addDemoGraphicLabel(graphicLayer) { // 添加文字标签
				const graphic = new mars3d.graphic.DivGraphic({
					position: [121.707989, 36.8605, 68.4],
					style: {
						html: `<div class="marsBlackPanel  animation-spaceInDown">
					                <div class="marsBlackPanel-text" style="color:'#fff;'">
					                  晶合窗口 <span class="temperature"></span> ℃
					                </div>
					              </div>`,
						// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
						// verticalOrigin: Cesium.VerticalOrigin.CENTER,
						heading: 70, // 方向角
						scale: 2,
						className: 'labelStyle'
						// minimumPixelSize: 100,
					},

					// attr: {
					// 	remark: "示例2"
					// }

				})

				graphicLayer.addGraphic(graphic)

			}
			function addDemoGraphic2(graphicLayer) {

				const graphic = new mars3d.graphic.ModelEntity({

					name: "风机",

					position: [121.707989, 36.8605, 68.4],

					style: {
						url: "./static/glb/logo_gnss.glb",
						// uri: "./static/glb/logo_gnss.glb",
						// url: "//data.mars3d.cn/gltf/mars/fengche.gltf",

						heading: 70, // 方向角

						scale: 30,

						minimumPixelSize: 100,

						silhouette: false,

						distanceDisplayCondition: true,

						distanceDisplayCondition_near: 0,

						distanceDisplayCondition_far: 9000,

						distanceDisplayBillboard: {

							// 当视角距离超过一定距离(distanceDisplayCondition_far定义的) 后显示为图标对象的样式

							image: "img/marker/square.png",

							scale: 1

						},

						// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用

						highlight: {

							type: 'click',

							silhouette: true,

							silhouetteColor: "#00ffff",

							silhouetteSize: 3

						}

					},

					attr: {
						remark: "示例2"
					}

				})

				graphicLayer.addGraphic(graphic)

			}
		</script>
	</body>
</html>